import React, { Component } from 'react';
import { Space, Table, Tag ,} from 'antd';
import {LikeTwoTone,SmileTwoTone,ClockCircleTwoTone ,SlidersTwoTone ,BoxPlotTwoTone,HighlightTwoTone  } from '@ant-design/icons'
class Guanjian extends Component {
    render() {
        const columns = [
            {
              title: '关键信息',
              dataIndex: 'name',
              key: 'name',
              align: 'center',
              render: (text) => <a>{text}</a>,
            },
            {
              title: '播种时间',
              dataIndex: 'age',
              align: 'center',
              key: 'age',
            },
            {
              title: '收获时间',
              dataIndex: 'address',
              key: 'address',
              align: 'center',
            },
            {
              title: '更新时间',
              key: 'tags',
              align: 'center',
              dataIndex: 'tags',
              render: (_, { tags }) => (
                <>
                  {tags.map((tag) => {
                    let color = tag.length > 5 ? 'geekblue' : 'green';
          
                    if (tag === 'loser') {
                      color = 'volcano';
                    }
          
                    return (
                      <Tag color={color} key={tag}>
                        {tag.toUpperCase()}
                      </Tag>
                    );
                  })}
                </>
              ),
            },
            
          ];
          const data = [
            {
              key: '1',
              name:<LikeTwoTone style={{fontSize:'30px', }}/>,
              age: '2022-5-7',
              address: '2022-7-11',
              tags: ['Sliho','更新时间在24小时之内'],
            },
            {
              key: '2',
              name: <SmileTwoTone style={{fontSize:'30px', }}/>,
              age: '2022-5-7',
              address:  '2022-7-11',
              tags: ['loser','更新时间在24小时之内'],
            },
            {
              key: '3',
              name: <HighlightTwoTone  style={{fontSize:'30px', }}/>,
              age: '2022-5-7',
              address: '2022-7-11',
              tags: ['cool', '更新时间在24小时之内'],
            },
            {
              key: '4',
              name: <ClockCircleTwoTone style={{fontSize:'30px', }}/>,
              age: '2022-5-7',
              address: '2022-7-11',
              tags: ['cool', '更新时间在24小时之内'],
            },
            {
              key: '5',
              name: <SlidersTwoTone style={{fontSize:'30px',}}/>,
              age: '2022-5-7',
              address: '2022-7-11',
              tags: ['cool', '更新时间在24小时之内'],
            },
            {
              key: '6',
              name: <BoxPlotTwoTone style={{fontSize:'30px', }}/>,
              age: '2022-5-7',
              address: '2022-7-11',
              tags: ['cool', '更新时间在24小时之内'],
            },
            // {
            //   key: '3',
            //   name: <AccountBookTwoTone  style={{fontSize:'30px', }}/>,
            //   age: '2022-5-7',
            //   address: '2022-7-11',
            //   tags: ['cool', '更新时间在24小时之内'],
            // },
          ];
        return (
            <div style={{width:'45%',
            float:'left',
            // backgroundColor:'pink',
            marginTop:"10px",
            
            
            }}>
                <Table columns={columns} dataSource={data} pagination={false} />
            </div>
        );
    }
}

export default Guanjian;
